<template>
  <el-input ref="number" v-bind="$attrs" v-model="localValue" @input="localValue = localValue.replace(/[^0-9.,-]/g, '')"
    @blur="EditFunc()" @focus="EditFunc()">
    <span slot="prefix" v-if="prefixValue" style="font-style: italic">{{
      prefixValue
    }}</span>
    <span slot="suffix" v-if="suffixValue" style="font-style: italic">{{
      suffixValue
    }}</span>
  </el-input>
</template>
<script>
export default {
  name: "money",
  props: {
    value: {},
    //前缀
    prefixValue: {
      type: String,
      default: "",
    },
    //后缀
    suffixValue: {
      type: String,
      default: "",
    },
    //精确度
    precision: {
      type: [Number,String],
      default: null,
    },
    //正数颜色
    PositiveColor: {
      type: String,
      default: "#000000",
    },
    //负数颜色
    minusColor: {
      type: String,
      default: "#000000",
    },
    //格式设置 thousand(千分位) millionn(万分位)
    formatSetting: {
      type: String,
      default: "",
    },
  },
  data() {
    return { localValue: null, isLeave: true }
  },
  watch: {
    localValue: {
      immediate: true,
      handler(val) {
        if (val >= 0 || (val && val.indexOf("-") == -1)) {
          if (this.$refs["number"]) {
            this.$refs.number.$refs.input.style = `color: ${this.PositiveColor} !important;`
          }
        } else {
          if (this.$refs["number"]) {
            this.$refs.number.$refs.input.style = `color: ${this.minusColor} !important;`
          }
        }
        let newValue = val
        if (
          newValue &&
          (this.formatSetting === "thousand" ||
            this.formatSetting === "millionn")
        ) {
          newValue = this.delFormatSetting(newValue)
        }
        this.$emit("input", newValue)
      },
    },
    value: {
      immediate: true,
      handler(val) {
        if (val || val == 0) {
          let newValue = val
          if (typeof newValue === "number") {
            newValue = newValue + ""
          }
          if (this.isLeave) {
            newValue = newValue.replace(/[^0-9.,-]/g, "")
            this.dealNumber(newValue)
          }
        } else {
          this.localValue = null
        }
      },
    },
  },
  methods: {
    EditFunc() {
      this.isLeave = !this.isLeave
      if (this.isLeave) {
        this.dealNumber(this.localValue)
      }
    },
    //设置精确度
    numberPrecision(value, n) {
      if (value) {
        var f = Math.round(value * Math.pow(10, n)) / Math.pow(10, n)
        var s = f.toString()
        var rs = s.indexOf(".")
        if (rs < 0) {
          s += "."
        }
        for (var i = s.length - s.indexOf("."); i <= n; i++) {
          s += "0"
        }
        return s
      } else {
        return null
      }
    },
    //千分位转化
    thousandBitSign(num) {
      if (!num) {
       return null
      }else{
        return num.toString().replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, "$&,")
      }
    },
    //万分位转化
    million(num) {
      if (!num) {
        return  null
      }else{
        return num.toString().replace(/\d{1,4}(?=(\d{4})+(\.\d*)?$)/g, "$&,")
      }
    },
    //去除格式
    delFormatSetting(num) {
      if ((num + "").trim() == "") {
        return null
      }
      num = num.replace(/,/gi, "")

      num = num * 1
      return num
    },
    dealNumber(value) {
      let newValue = value
      if (this.precision) {
        if (
          this.formatSetting === "thousand" ||
          this.formatSetting === "millionn"
        ) {
          newValue = this.delFormatSetting(newValue)
        }
        newValue = this.numberPrecision(newValue, this.precision)
      }
      if (this.formatSetting === "millionn") {
        newValue = this.million(newValue)
      }
      if (this.formatSetting === "thousand") {
        newValue = this.thousandBitSign(newValue)
      }
      this.localValue = newValue
    },
  },
}
</script>
<style lang="scss" scoped></style>
